<template>
  <div class="resume-container">
    <div class="toolbar">
      <div class="toolbar-left">
        <el-select v-model="selectedTemplate" placeholder="选择模板" class="template-select">
          <el-option
            v-for="template in templates"
            :key="template.value"
            :label="template.label"
            :value="template.value"
          />
        </el-select>
      </div>
      <div class="toolbar-center">
        <el-button-group>
          <el-button @click="previewResume" type="primary">
            <el-icon><View /></el-icon> 预览
          </el-button>
          <el-button @click="saveResume">
            <el-icon><Download /></el-icon> 保存
          </el-button>
        </el-button-group>
      </div>
      <div class="toolbar-right">
        <el-button-group>
          <el-button @click="printResume">
            <el-icon><Printer /></el-icon> 打印
          </el-button>
          <el-button @click="exportPDF">
            <el-icon><Document /></el-icon> 导出PDF
          </el-button>
        </el-button-group>
      </div>
    </div>

    <div class="resume-content">
      <div class="editor-panel">
        <el-form :model="resumeData" label-position="top">
          <el-card class="section">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
              </div>
            </template>
            <el-form-item label="姓名">
              <el-input v-model="resumeData.basicInfo.name" />
            </el-form-item>
            <el-form-item label="求职意向">
              <el-input v-model="resumeData.basicInfo.title" />
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="resumeData.basicInfo.contact" />
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="resumeData.basicInfo.email" />
            </el-form-item>
            <el-form-item label="所在地">
              <el-input v-model="resumeData.basicInfo.location" />
            </el-form-item>
          </el-card>

          <el-card class="section">
            <template #header>
              <div class="card-header">
                <span>教育经历</span>
                <el-button type="primary" @click="addEducation">
                  <el-icon><Plus /></el-icon> 添加
                </el-button>
              </div>
            </template>
            <div v-for="(edu, index) in resumeData.education" :key="index" class="list-item">
              <el-form-item label="学校">
                <el-input v-model="edu.school" />
              </el-form-item>
              <el-form-item label="专业">
                <el-input v-model="edu.major" />
              </el-form-item>
              <el-form-item label="学历">
                <el-input v-model="edu.degree" />
              </el-form-item>
              <el-form-item label="时间">
                <el-input v-model="edu.period" />
              </el-form-item>
              <el-button type="danger" @click="removeEducation(index)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
          </el-card>

          <el-card class="section">
            <template #header>
              <div class="card-header">
                <span>工作经历</span>
                <el-button type="primary" @click="addExperience">
                  <el-icon><Plus /></el-icon> 添加
                </el-button>
              </div>
            </template>
            <div v-for="(exp, index) in resumeData.experience" :key="index" class="list-item">
              <el-form-item label="公司">
                <el-input v-model="exp.company" />
              </el-form-item>
              <el-form-item label="职位">
                <el-input v-model="exp.position" />
              </el-form-item>
              <el-form-item label="时间">
                <el-input v-model="exp.period" />
              </el-form-item>
              <el-form-item label="工作内容">
                <el-input type="textarea" v-model="exp.description" />
              </el-form-item>
              <el-button type="danger" @click="removeExperience(index)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
          </el-card>

          <el-card class="section">
            <template #header>
              <div class="card-header">
                <span>技能特长</span>
                <el-button type="primary" @click="addSkill">
                  <el-icon><Plus /></el-icon> 添加
                </el-button>
              </div>
            </template>
            <div v-for="(skill, index) in resumeData.skills" :key="index" class="list-item">
              <el-form-item label="技能名称">
                <el-input v-model="skill.name" />
              </el-form-item>
              <el-form-item label="熟练程度">
                <el-rate v-model="skill.level" :max="5" />
              </el-form-item>
              <el-button type="danger" @click="removeSkill(index)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
          </el-card>

          <el-card class="section">
            <template #header>
              <div class="card-header">
                <span>项目经验</span>
                <el-button type="primary" @click="addProject">
                  <el-icon><Plus /></el-icon> 添加
                </el-button>
              </div>
            </template>
            <div v-for="(project, index) in resumeData.projects" :key="index" class="list-item">
              <el-form-item label="项目名称">
                <el-input v-model="project.name" />
              </el-form-item>
              <el-form-item label="时间">
                <el-input v-model="project.period" />
              </el-form-item>
              <el-form-item label="项目描述">
                <el-input type="textarea" v-model="project.description" />
              </el-form-item>
              <el-form-item label="技术栈">
                <el-input v-model="project.techStack" />
              </el-form-item>
              <el-button type="danger" @click="removeProject(index)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
          </el-card>
        </el-form>
      </div>

      <div class="preview-panel">
        <div :class="['resume-preview', selectedTemplate]">
          <div class="resume-header">
            <h1>{{ resumeData.basicInfo.name || '姓名' }}</h1>
            <h2>{{ resumeData.basicInfo.title || '求职意向' }}</h2>
            <div class="contact-info">
              <div><i class="el-icon-phone"></i> {{ resumeData.basicInfo.contact || '联系方式' }}</div>
              <div><i class="el-icon-message"></i> {{ resumeData.basicInfo.email || '电子邮箱' }}</div>
              <div><i class="el-icon-location"></i> {{ resumeData.basicInfo.location || '所在地' }}</div>
            </div>
          </div>

          <div class="resume-section">
            <h3><i class="el-icon-school"></i> 教育经历</h3>
            <template v-if="resumeData.education.length">
            <div v-for="edu in resumeData.education" :key="edu.school" class="section-item">
              <div class="item-header">
                <span class="item-title">{{ edu.school }}</span>
                <span class="item-period">{{ edu.period }}</span>
              </div>
              <div class="item-content">
                {{ edu.major }} | {{ edu.degree }}
              </div>
            </div>
            </template>
          </div>

          <div class="resume-section">
            <h3><i class="el-icon-office-building"></i> 工作经历</h3>
            <template v-if="resumeData.experience.length">
            <div v-for="exp in resumeData.experience" :key="exp.company" class="section-item">
              <div class="item-header">
                <span class="item-title">{{ exp.company }}</span>
                <span class="item-period">{{ exp.period }}</span>
              </div>
                <div class="item-content" v-html="safeHTML(exp.description)"></div>
            </div>
            </template>
          </div>

          <div class="resume-section">
            <h3><i class="el-icon-star"></i> 技能特长</h3>
            <template v-if="resumeData.skills.length">
              <div v-for="skill in resumeData.skills" :key="skill.name" class="section-item">
                <div class="item-header">
                  <span class="item-title">{{ skill.name }}</span>
                  <span class="item-level">熟练度: {{ skill.level }}</span>
                </div>
              </div>
            </template>
          </div>

          <div class="resume-section">
            <h3><i class="el-icon-folder"></i> 项目经验</h3>
            <template v-if="resumeData.projects.length">
            <div v-for="project in resumeData.projects" :key="project.name" class="section-item">
              <div class="item-header">
                <span class="item-title">{{ project.name }}</span>
                <span class="item-period">{{ project.period }}</span>
              </div>
                <div class="item-content" v-html="safeHTML(project.description + ' | ' + project.techStack)"></div>
            </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增预览弹窗 -->
  <el-dialog v-model="previewVisible" title="简历预览" width="80%" :close-on-click-modal="false">
    <div :class="['resume-preview', selectedTemplate]">
      <div class="resume-header">
        <h1>{{ resumeData.basicInfo.name || '姓名' }}</h1>
        <h2>{{ resumeData.basicInfo.title || '求职意向' }}</h2>
        <div class="contact-info">
          <div><i class="el-icon-phone"></i> {{ resumeData.basicInfo.contact || '联系方式' }}</div>
          <div><i class="el-icon-message"></i> {{ resumeData.basicInfo.email || '电子邮箱' }}</div>
          <div><i class="el-icon-location"></i> {{ resumeData.basicInfo.location || '所在地' }}</div>
        </div>
      </div>

      <div class="resume-section">
        <h3><i class="el-icon-school"></i> 教育经历</h3>
        <template v-if="resumeData.education.length">
          <div v-for="edu in resumeData.education" :key="edu.school" class="section-item">
            <div class="item-header">
              <span class="item-title">{{ edu.school }}</span>
              <span class="item-period">{{ edu.period }}</span>
            </div>
            <div class="item-content">
              {{ edu.major }} | {{ edu.degree }}
            </div>
          </div>
        </template>
      </div>

      <div class="resume-section">
        <h3><i class="el-icon-office-building"></i> 工作经历</h3>
        <template v-if="resumeData.experience.length">
          <div v-for="exp in resumeData.experience" :key="exp.company" class="section-item">
            <div class="item-header">
              <span class="item-title">{{ exp.company }}</span>
              <span class="item-period">{{ exp.period }}</span>
            </div>
            <div class="item-content" v-html="safeHTML(exp.description)"></div>
          </div>
        </template>
      </div>

      <div class="resume-section">
        <h3><i class="el-icon-star"></i> 技能特长</h3>
        <template v-if="resumeData.skills.length">
          <div v-for="skill in resumeData.skills" :key="skill.name" class="section-item">
            <div class="item-header">
              <span class="item-title">{{ skill.name }}</span>
              <span class="item-level">熟练度: {{ skill.level }}</span>
            </div>
          </div>
        </template>
      </div>

      <div class="resume-section">
        <h3><i class="el-icon-folder"></i> 项目经验</h3>
        <template v-if="resumeData.projects.length">
          <div v-for="project in resumeData.projects" :key="project.name" class="section-item">
            <div class="item-header">
              <span class="item-title">{{ project.name }}</span>
              <span class="item-period">{{ project.period }}</span>
            </div>
            <div class="item-content" v-html="safeHTML(project.description + ' | ' + project.techStack)"></div>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  View,
  Download,
  Upload,
  Document,
  Printer,
  Plus,
  Delete
} from '@element-plus/icons-vue'
import DOMPurify from 'dompurify'

const templates = [
  { label: '模板一', value: 'template1' },
  { label: '模板二', value: 'template2' },
  { label: '模板三', value: 'template3' }
]

const selectedTemplate = ref('template1')

const resumeData = reactive({
  basicInfo: {
    name: '',
    title: '',
    contact: '',
    email: '',
    location: ''
  },
  education: [],
  experience: [],
  skills: [],
  projects: []
})

const resumeId = ref(1) // 假设ID为1

// 拉取简历
const fetchResume = async () => {
  const res = await fetch(`/api/resume/${resumeId.value}`)
  if (res.ok) {
    const data = await res.json()
    resumeData.basicInfo = {
      name: data.name,
      title: data.title,
      contact: data.contact,
      email: data.email,
      location: data.location
    }
    resumeData.education = data.education || []
    resumeData.experience = data.experience || []
    resumeData.skills = data.skills || []
    resumeData.projects = data.projects || []
  } else {
    // 如果没有则自动创建一条
    await saveResume()
  }
}

// 保存简历
const saveResume = async () => {
  const payload = {
    name: resumeData.basicInfo.name,
    title: resumeData.basicInfo.title,
    contact: resumeData.basicInfo.contact,
    email: resumeData.basicInfo.email,
    location: resumeData.basicInfo.location,
    education: resumeData.education,
    experience: resumeData.experience,
    skills: resumeData.skills,
    projects: resumeData.projects
  }
  await fetch(`/api/resume/${resumeId.value}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
}

// 表单任意一项变动时自动保存
watch(
  () => [
    resumeData.basicInfo.name,
    resumeData.basicInfo.title,
    resumeData.basicInfo.contact,
    resumeData.basicInfo.email,
    resumeData.basicInfo.location,
    JSON.stringify(resumeData.education),
    JSON.stringify(resumeData.experience),
    JSON.stringify(resumeData.skills),
    JSON.stringify(resumeData.projects)
  ],
  saveResume,
  { deep: true }
)

// 页面加载时自动拉取
fetchResume()

// 添加教育经历
const addEducation = () => {
  resumeData.education.push({
    school: '',
    major: '',
    degree: '',
    period: ''
  })
}

// 添加工作经历
const addExperience = () => {
  resumeData.experience.push({
    company: '',
    position: '',
    period: '',
    description: ''
  })
}

// 添加技能
const addSkill = () => {
  resumeData.skills.push({
    name: '',
    level: 3
  })
}

// 添加项目
const addProject = () => {
  resumeData.projects.push({
    name: '',
    period: '',
    description: '',
    techStack: ''
  })
}

// 删除教育经历
const removeEducation = (index) => {
  resumeData.education.splice(index, 1)
}

// 删除工作经历
const removeExperience = (index) => {
  resumeData.experience.splice(index, 1)
}

// 删除技能
const removeSkill = (index) => {
  resumeData.skills.splice(index, 1)
}

// 删除项目
const removeProject = (index) => {
  resumeData.projects.splice(index, 1)
}

// 预览简历
const previewVisible = ref(false)
const previewResume = () => {
  previewVisible.value = true
}

// 打印简历
const printResume = () => {
  const editorPanel = document.querySelector('.editor-panel')
  const toolbar = document.querySelector('.toolbar')
  if (editorPanel) editorPanel.style.display = 'none'
  if (toolbar) toolbar.style.display = 'none'
  window.print()
  if (editorPanel) editorPanel.style.display = 'flex'
  if (toolbar) toolbar.style.display = 'flex'
}

// 导出PDF
const exportPDF = () => {
  ElMessage.info('PDF导出功能开发中...')
}

// 富文本安全过滤
const safeHTML = (html) => DOMPurify.sanitize(html)
</script>

<style scoped>
body, html {
  background: #f5f7fa;
}
.resume-container {
  min-height: 100vh;
  padding: 0;
  margin-top: 0;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 28px auto;
  padding: 18px 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(30, 60, 90, 0.08);
  max-width: 1100px;
  height: 68px;
}
.toolbar-left {
  min-width: 180px;
}
.toolbar-center {
  display: flex;
  gap: 12px;
}
.toolbar-right {
  display: flex;
  gap: 12px;
}
.template-select {
  width: 180px;
}
.toolbar .el-button {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  height: 36px;
}
.toolbar .el-button .el-icon {
  font-size: 16px;
  margin-right: 4px;
}
.toolbar .el-button-group {
  display: flex;
  gap: 1px;
}
.toolbar .el-button-group .el-button {
  border-radius: 0;
}
.toolbar .el-button-group .el-button:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.toolbar .el-button-group .el-button:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.resume-content {
  width: 100vw;
  max-width: 1100px;
  margin: 0 auto 32px auto;
  display: flex;
  gap: 36px;
  box-sizing: border-box;
  align-items: stretch;
}
.editor-panel,
.preview-panel {
  background: #fff;
  border-radius: 16px;
  padding: 5px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.editor-panel {
  flex: 7;
  margin-right: 0;
  min-width: 0;
}
.preview-panel {
  flex: 5;
  align-items: center;
  justify-content: flex-start;
  margin-left: 0;
  min-width: 0;
}
.section {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(30, 60, 90, 0.04);
  border: none;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  padding-bottom: 4px;
}
.list-item {
  padding: 10px 0 0 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
.list-item:last-child {
  border-bottom: none;
}
.list-item .el-button,
.section .el-button {
  border-radius: 6px;
  font-size: 13px;
  padding: 0 10px;
  height: 28px;
  min-width: 44px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-input, .el-textarea {
  font-size: 15px;
  border-radius: 6px;
}
.el-rate {
  font-size: 18px;
}
.resume-preview {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px 0 rgba(30, 60, 90, 0.10);
  padding: 40px 36px 36px 36px;
}
.resume-header {
  text-align: center;
  margin-bottom: 36px;
}
.resume-header h1 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 8px 0;
  color: #222;
}
.resume-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #2563eb;
  margin: 0 0 18px 0;
}
.contact-info {
  display: flex;
  justify-content: center;
  gap: 28px;
  color: #8a99b3;
  font-size: 15px;
  margin-bottom: 0;
}
.contact-info > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.resume-section {
  margin-bottom: 28px;
}
.resume-section h3 {
  display: flex;
  align-items: center;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 8px;
}
.resume-section h3 i {
  font-size: 18px;
  margin-right: 8px;
  color: #2563eb;
}
.resume-section h3::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
  border-radius: 1px;
}
.section-item {
  margin-bottom: 12px;
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.item-title {
  font-weight: 600;
  color: #222;
  font-size: 15px;
}
.item-period, .item-level {
  color: #8a99b3;
  font-size: 13px;
}
.item-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
}
.skill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.skill-name {
  font-weight: 500;
  color: #2563eb;
}
.item-tech {
  color: #8a99b3;
  font-size: 14px;
  margin-top: 4px;
}
.template1 {}
.template2 { background: #f5f7fa; }
.template2 .resume-header { background: #409EFF; color: #fff; padding: 20px; margin: -40px -40px 30px -40px; }
.template2 .resume-header h2, .template2 .contact-info { color: #fff; }
.template3 { font-family: 'Georgia', serif; }
.template3 .resume-header { border-bottom: 3px solid #333; padding-bottom: 20px; }
.template3 .resume-section h3 { border-bottom: 1px solid #333; color: #333; }
@media print {
  .editor-panel, .toolbar {
    display: none !important;
  }
  .resume-preview {
    width: 100%;
    max-width: none;
    box-shadow: none;
    padding: 0;
  }
}
</style> 